<template>
    <div v-if="editStatus" class="m-edit-modal">
        <div class="header">
            {{title}}
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="m-content">
            <Form ref="myData" :label-width="100" style="width: 900px"
                  :inline="true">
                <FormItem label="标题:" prop="posts_title">
                    <Input type="text" v-model="title" placeholder="请输入..." style="width: 800px"/>
                </FormItem>
                <FormItem label="摘要:" prop="posts_title">
                    <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model="digest" placeholder="请输入..." style="width: 800px"/>
                </FormItem>
                <Row>
                    <Col span="12">
                        <FormItem label="作者" prop="posts_source">
                            <Input type="text" v-model="author" placeholder="请输入..." style="width: 200px"/>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="分类" prop="posts_source">
                            <Select style="width: 300px" v-model="type">
                                <Option value="0">新闻</Option>
                                <Option value="1">百生智库</Option>
                                <Option value="2">公司简介</Option>
                                <Option value="3">主营业务</Option>
                                <Option value="4">联系我们</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="主图:" prop="cover_file_path">
                            <up-load-file :imgUrl="imageUrl" :imgLength="1" @getImgUrl="getImgUrl"></up-load-file>
                        </FormItem>
                    </Col>
                </Row>

                <FormItem label="内容:">
                    <UE :defaultMsg=content :config=config ref="ue"></UE>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit()">提交</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    import upLoadFile from '../../components/upLoadFile.vue'
    import address from '../../components/address.vue'
    import API from '../../config/api'
    import qs from 'qs'
    import {formatDateTime, checkTel} from '../../config/utils'

    import UE from '../../components/ue/ue.vue';

    export default {
        props: ['editStatus','articleId'],
        components: {
            'up-load-file': upLoadFile, UE
        },
        data() {
            return {
                title: '',
                digest: '',
                author: '',
                type: '',//类型:(0:新闻,1:百生智库,2:公司简介,3:主营业务,4:联系我们)
                imageId: '', //主图id(多个使用","隔开)
                imageUrl: '',
                content: '',
                adjunctIds: '', //附件id(多个使用","隔开)
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350,
                    serverUrl: process.env.BASE_URL + '/evoucher/ueditor/config'
                },
                typeData: []
            }
        },
        methods: {
            notifyArticle(){
                if (!this.title){
                    this.$Message.error('请请输入文章标题');
                    return ;
                }
                // let param = {};
                // param.posts_content = this.$refs.ue.getUEContent();
                // param.author = this.author;
                // param.type = this.type;
                // param.imageId = this.imageId;
                // param.id = this.articleId;
                // let params = qs.stringify(param);
                let formData = new FormData();
                formData.append('content', this.$refs.ue.getUEContent());
                formData.append('author', this.author);
                formData.append('type', this.type);
                formData.append('imageId', this.imageId);
                formData.append('title', this.title);
                formData.append('digest', this.digest);
                formData.append('id', this.articleId);
                this.axios.post(API.NOTIFY_ARTICLE, formData).then(response => {
                    if (response.data.code == 200) {
                        this.$Message.success('更新成功！');
                        this.close();
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            saveContentInfo() {
                let vm = this;
                if (!this.title){
                    this.$Message.error('请请输入文章标题');
                    return ;
                }
                if(!vm.type || vm.type == 'undefined' || vm.type === undefined){
                    this.$Message.error('请重新选择类型');
                    return ;
                }
                // let param = {};
                // param.posts_content = this.$refs.ue.getUEContent();
                // param.author = this.author;
                // param.type = this.type;
                // param.imageId = this.imageId;
                // let params = qs.stringify(param);
                let formData = new FormData();
                formData.append('content', this.$refs.ue.getUEContent());
                formData.append('author', this.author);
                formData.append('type', this.type);
                formData.append('title', this.title);
                formData.append('digest', this.digest);
                formData.append('imageId', this.imageId);
                this.axios.post(API.ADD_ARTICLE, formData).then(response => {
                    if (response.data.code == 200) {
                        this.$Message.success('发布成功！');
                        this.close();
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            getImgUrl(file) {
                this.imageId = file.id;
                this.imageUrl = file.url;
            },
            handleSubmit() {
                if (this.articleId){
                    this.notifyArticle();
                } else {
                    this.saveContentInfo();
                }
            },
            close() {
                this.content = "";
                this.$emit('closeModal')
            },
            getArticle(){
                let data = {
                    id: this.articleId
                }
                this.axios.post(API.GET_ARTICLE_INFO, qs.stringify(data)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        let netData = data.data;
                        this.author = netData.author;
                        this.type = netData.type;
                        this.title = netData.title;
                        this.content = netData.content;
                        this.digest = netData.digest;
                        this.imageId = netData.imageId;
                        this.imageUrl = process.env.BASE_URL+ API.GET_IMAGES + '?id='+netData.images[0].id
                    }
                })
            },
            getImages(id){

            }
        },
        computed: {
            myData() {
                // let vm = this;
                // if (vm.editData.posts_id) {
                //     vm.posts_content = vm.editData.posts_content;
                // }
                // if (vm.editData.posts_type != 'undefined' && vm.editData.posts_type != undefined) {
                //     vm.posts_type = vm.editData.posts_type+"";
                // }
                // return this.editData;
            }
        },
        watch: {
          'editStatus': function (val) {
              if (val && this.articleId){
                  this.getArticle()
              }
          }
        },
        created() {
            this.content = "";
            if (this.articleId){
                this.getArticle()
            }
        }
    }
</script>
<style lang='scss' scoped>
    .m-edit-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }
        .m-content {
            margin-top: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }

    }
</style>
